<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="mini" clearable v-model="formInline.status" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini"  @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col :span="12">
        <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
        <el-button :disabled="btnDisabled" @click="changeRole" type="primary" size="mini">编辑</el-button>
        <el-button type="danger" size="mini">启用/禁用</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          border
          size="mini"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="NAME"
            label="角色名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="STATUS"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="MSG"
            label="描述">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATEUSERNAME"
            label="创建人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            label="创建时间">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible" center width="80%">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form.name" autocomplete="off" placeholder="请输入角色名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form.msg" placeholder="请输入角色描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-col :span="8" v-for="item in treeList" style="margin-bottom: 5px">
            <el-card shadow="hover">
              <el-tree show-checkbox ref="tree" :data="item" :props="defaultProps"></el-tree>
            </el-card>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button size="mini" type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible2" center width="80%">
      <el-form :model="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
              <el-input size="mini" v-model="editForm.name" autocomplete="off" placeholder="请输入角色名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述" :label-width="formLabelWidth">
              <el-input size="mini" v-model="editForm.msg" placeholder="请输入角色描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-col :span="8" v-for="item in treeList" style="margin-bottom: 5px">
            <el-card shadow="hover">
              <el-tree disabled :default-checked-keys="editList" node-key="operationId" show-checkbox ref="tree2" :data="item" :props="defaultProps"></el-tree>
            </el-card>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addRole2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "roleAndAuth",
    data() {
      return{
        pagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        btnDisabled: true,
        menuList: JSON.parse(localStorage.getItem('userMsg')).power,
        formInline: {},
        dialogFormVisible: false,
        dialogFormVisible2: false,
        formLabelWidth: '120px',
        form: {},
        tableData: [],
        tableVal: [],
        defaultProps: {
          children: 'powerList',
          label: 'nodeName'
        },
        treeList: [],
        editList: [],
        editForm: {
          name: '',
          msg: ''
        }
      }
    },
    created() {
      for (let i = 0; i < this.menuList.length; i++) {
        this.treeList[i] = [];
        this.treeList[i].push(this.menuList[i]);
      }
      this.getRole(this.pagination.pageSize, this.pagination.pageNo)
    },
    methods: {
      search() {
        this.$post('/role/findRole', {
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          name: this.formInline.name,
          status: this.formInline.status
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('条件输入错误，请检查');
            return;
          }
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      newAdd() {
        this.dialogFormVisible = true;
      },
      getRole(pageSize, pageNo) {
        this.$post("/role/findRole", {pageSize, pageNo}).then(res => {
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      addRole() {
        if(!this.form.name) {
          this.$message.error('角色名称为必填');
          return;
        }
        let role = [];
        let btn = [];
        for (let i = 0; i < this.$refs.tree.length; i++) {
          const arr = this.$refs.tree[i].getCheckedNodes(false, true);
          if(arr.length == 0) continue;
          for(let i = 0; i < arr.length; i++) {
            if(arr[i].powerId) {
              role.push(arr[i].powerId)
            } else {
              btn.push(arr[i].operationId)
            }
          }
        }
        if(role.length == 0) {
          this.$message.error('权限菜单必选');
          return;
        }
        this.$post('/role/add', {
          name: this.form.name,
          msg: this.form.msg,
          powerIds: role.join(),
          powerOperationIds: btn.join()
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('请求失败，请稍后再试');
            return;
          }
          this.$message.success(res.data.msg);
          this.dialogFormVisible = false;
        })
      },
      addRole2() {
        if(!this.editForm.name) {
          this.$message.error('角色名称为必填');
          return;
        }
        let role = [];
        let btn = [];
        for (let i = 0; i < this.$refs.tree2.length; i++) {
          const arr = this.$refs.tree2[i].getCheckedNodes(false, true);
          if(arr.length == 0) continue;
          for(let i = 0; i < arr.length; i++) {
            if(arr[i].powerId) {
              role.push(arr[i].powerId)
            } else {
              btn.push(arr[i].operationId)
            }
          }
        }
        if(role.length == 0) {
          this.$message.error('权限菜单必选');
          return;
        }
        this.$post('/role/update', {
          name: this.editForm.name,
          msg: this.editForm.msg,
          id: this.tableVal[0].ID,
          powerIds: role.join(),
          powerOperationIds: btn.join()
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error(res.data.msg);
            return;
          }
          this.$message.success(res.data.msg);
          this.dialogFormVisible2 = false;
        })
      },
      changeRole() {
        this.$post('/role/findRolePowerOperationByRoleId', {roleId: this.tableVal[0].ID}).then(res => {
          this.filterRole(res.data.data);
          this.editForm.name = this.tableVal[0].NAME;
          this.editForm.msg = this.tableVal[0].MSG;
          this.dialogFormVisible2 = true;
        })
      },
      filterRole(node) {
        for(let i = 0; i < node.length; i++) {
          if(node[i].powerList) {
            this.filterRole(node[i].powerList)
          } else {
            this.editList.push(node[i].operationId)
          }
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getRole(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getRole(this.pagination.pageSize, page);
      },
      handleSelectionChange(val) {
        val.length === 1 ? this.btnDisabled = false : this.btnDisabled = true;
        this.tableVal = val;
      },
      closeDialog() {
        this.dialogFormVisible = false;
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/.el-card{
    margin-right: 10px;
  }
</style>
